<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html{
				font-size: 48px;
				
				/* 定义变量 */
				--iphone-black-bg:#000;
				--iphone-black-text:#f2f2f2;
				
				--iphone-white-bg:#fff;
				--iphone-white-text:#8b8b99;
				--iphone-white-text-highlight:#1d1d1f;
			
				
				--iphone-red-bg:#960b19;
				--iphone-red-text:#e57571;
				--iphone-red-text-highlight:#f5f5f7;
				
				--iphone-width:460px;
				--iphone-offscreen:-720px;
			}
			body{
				margin: 0;
				height: 3000px;
				font-family: helvetica;
				background-color: #000;
			}
			
			.sticky-container{
				position: sticky;
				top: 0;
				width: 100%;
				height: 100vh;
				overflow: hidden;
			}
			
			.sticky-container .iphone{
				display: flex;
				flex-direction: column;
				/* 使水平居中且贴合 */
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0;
				left: 0;
				
			}
			/* rem代表以html设定的像素为每个单位 */
			.sticky-container .iphone h3{
				font-size: 1rem;
				width: var(--iphone-width);
				margin: 0 0 60px 0
			}
			
			.sticky-container .iphone img{
				display: block;
				width:var(--iphone-width);
				margin-bottom:var(--iphone-offscreen);
				}
				
				.sticky-container .iphone.black
				{
					background-color: var(--iphone-black-bg);
					z-index: 10;
				}
				
				.sticky-container .iphone.black h3
				{
					color: var(--iphone-black-text);
				}
				
				.sticky-container .iphone.white
				{
					background-color: var(--iphone-white-bg);
					z-index: 20;	clip-path: inset(100% 0px 0px 0px);
					
					clip-path: inset(100% 0px 0px 0px);
					
				}
				
				.sticky-container .iphone.white h3{
					color: var(--iphone-white-text);
				}
				
				.sticky-container .iphone.white h3 span{
					color: var(--iphone-white-text-highlight);
				}
				
				.sticky-container .iphone.red
				{
					background-color: var(--iphone-red-bg);
					z-index: 30;
					
					/* 遮罩 */
					clip-path: inset(100% 0px 0px 0px);
				}
				
				.sticky-container .iphone.red h3{
					
					color: var(--iphone-red-text);
				}
				
				.sticky-container .iphone.red h3 span{
					color: var(--iphone-red-text-highlight);
				}
				
				.sticky-container.no-sticky{
					position: relative;
					overflow: visible;
				}
				
				.sticky-container.no-sticky .iphone{
					position: relative;
				}
				
				.sticky-container.no-sticky .iphone.red{
					padding-bottom: calc(var(--iphone-offscreen)*-1);
				}
		</style>
	</head>
	<body>
		<!-- https://www.apple.com.cn/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium.png -->
		<!-- https://www.apple.com.cn/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium.png -->
		<!-- https://www.apple.com.cn/iphone-se/images/overview/finishes_red__eqfv1ongy282_medium.png -->
		<div class="sticky-container">
			<div class="iphone black">
				<h3>
					Comes in Black.<br>
					&nbsp;
				</h3>
				<img src="https://www.apple.com.cn/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium.png" >
			</div>
			<div class="iphone white">
				<h3>
					Comes in Black.<br>
					<span>White.</span>
				</h3>
				<img src="https://www.apple.com.cn/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium.png">
			</div>
			<div class="iphone red">
				<h3>
					Comes in Black.<br>
					White. <span>And Pow</span>
				</h3>
				
				<img src="https://www.apple.com.cn/iphone-se/images/overview/finishes_red__eqfv1ongy282_medium.png" >
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				window.addEventListener('scroll',(e) =>{
					let noStickyOffset = document.documentElement.clientHeight * 2;
					let scrolled  = document.documentElement.scrollTop / noStickyOffset;
					
					console.log(document.documentElement.scrollTop)
					console.log(document.documentElement.clientHeight);
					console.log(scrolled);
					
					let $white = document.querySelector('.white');
					let $red = document.querySelector('.red');
					/*JS ES6 template string 写法*/ 
					/*50%前页面显示白色*/ 
					$white.style.clipPath= `inset(${((0.5 - scrolled) / 0.5) *
					100}% 0px 0px 0px)`;
					/*50% - 100% 页面显示红色*/ 
					$red.style.clipPath= `inset(${((1 - scrolled) / 0.5) *
					100}% 0px 0px 0px)`
					
					/*使红色下方溢出内容可被显示*/ 
					if (scrolled >= 1){
						document.querySelector('.sticky-container').classList.add('no-sticky');
					}
					else{
						document.querySelector('.sticky-container').classList.remove('no-sticky');
					}
				})
			}
		</script>
	</body>
</html>


